<template>
    <div id="" class="ve">
      <div class="router"  :class="this.ta != 0?Classn:''" >
        <!--系统管理员页面-->
        <div><h3>车辆信息展示</h3></div>
        <!--搜索-->
        <div>
          <div >
            <div class="suo"><span>用户信息检索：</span><input type="text" v-model="yhname"></div>
          </div>
          <ul class="xtul">
            <li>
              <div>id</div>
              <div>编号</div>
              <div>车辆品牌</div>
              <div>购买时间</div>
              <div>车牌号</div>
              <div>车辆类型</div>
              <div>总里程</div>
              <div>油耗</div>
              <div>基本费用</div>
              <div>养路费</div>
              <div>箱数</div>
              <div>核载人数</div>
              <div>总费用</div>
              <div>载重</div>
              <div>车主</div>
              <div></div>
            </li><!--item in xiangqing-->
            <li  v-for="(item ,index) in search">
              <div>{{item.serial_number}}</div>
              <div>{{item.manufacturing_company}}</div>
              <div>{{item.purchasing_date | fil("YYYY-MM-DD")}}</div>
              <div>{{item.license_plate_number}}</div>

              <div>{{item.model_of_car}}</div>
              <div>{{item.the_total_mileage}}</div>

              <div>{{item.fuel_consumption}}</div>
              <div>{{item.basic_maintenance_cost}}</div>
              <div>{{item.road_toll}}</div>
              <div>{{item.cumulative_total_cost}}</div>
              <div>{{item.busload}}</div>
              <div>{{item.carton_numbers}}</div>
              <div>{{item.load_capacity}}</div>
              <div>{{item.owner}}</div>
              <div>
                <button @click="schu(index)">删除</button>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="router"  :class="this.ta != 1?Classn:''" >
        <div><h3>信息展示</h3></div>
        <!--车辆详情-->
        <div>
          <ul class="xq">
            <li>
              <div>编号</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.serial_number}}</div>
            </li>
            <li>
              <div>车辆品牌</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.manufacturing_company}}</div>
            </li>
            <li>
              <div>购买时间</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.purchasing_data}}</div>
            </li>
            <li>
              <div>车牌号</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.license_plate_number}}</div>
            </li>
            <li>
              <div>车辆类型</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.model_of_car}}</div>
            </li>
            <li>
              <div>总里程</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.the_total}}</div>
            </li>
            <li>
              <div>油耗</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.fuel_consumption}}</div>
            </li>
            <li>
              <div>基本费用</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.basic_maintenance_cost}}</div>
            </li>
            <li>
              <div>养路费</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.road_toll}}</div>
            </li>
            <li>
              <div>总费用</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.cumulative_total_cost}}</div>
            </li>
            <li>
              <div>核载人数</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.busload}}</div>
            </li>
            <li>
              <div>箱数</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.carton_numbers}}</div>
            </li>
            <li>
              <div>载重</div>
              <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.load_capacity}}</div>
            </li>

          </ul>
        </div>
      </div>

    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "vehicle_information",
      props:['userName'],
      data(){
          return{
            xiangqing:[],
            ta:'',
            Classn:'blacx',
            yhname:''
          }
      },
      computed:{
        search: function () {

          var yhna = this.yhname;
          if(yhna){
            return this.xiangqing.filter(function (xiangq) {
              return Object.keys(xiangq).some(function (key) {
                return String(xiangq[key]).toLowerCase().indexOf(yhna) > -1
              })
            })
          }
          return this.xiangqing;
        }
      },
      created(){
        this.getchusi();
      },
      methods:{
        // 删除用户信息
        schu:function (s) {
          if(!confirm('是否删除数据')){
            return;//当用户点击取消 应阻断这个方法的 后面代码的执行
          }
          var ids = this.xiangq[s].id;
          this.$http.post('/api/user/delVehicle',{
            id: ids
          },{}).
          then((response) => {
            //console.log(response);
            Toast({
              message: '删除成功',
              position: 'bottom',
              duration: 5000
            });
          })
          //刷新数据
          this.getchusi();
        },
        //请求初始信息
        getchusi:function () {

          this.name = this.userName.name;
          if(this.name == "系统用户"){
            this.ta = 0;
            //console.log("个人用户")
          }else{
            this.ta = 1;
            //console.log("系统用户")
          }

          this.$http.get('/api/user/referVehicle',).then(function(response){
            this.xiangqing  = response.body; //把用户数据 传给数组.xiangqing
            //console.log(response.body)
          })

        }
      }
    }
</script>

<style scoped>
  .suo{display: flex;justify-content: center}
  .suo span{vertical-align: middle;}
  .suo input[type='text']{
    vertical-align: middle;
    width: 200px;
    height: 25px;
  }
  .yhxx{padding: 20px 0}
  .xtul{
    font-size: 12px;
    width:100%;color:black;margin: 20px auto;}
  .xtul>li{display: flex;margin-bottom: 2px}
  .xtul>li:first-child{font-size: 14px;margin-bottom: 10px}
  .xtul>li:not(:first-child){
    border:1px solid darkgray;
    border-raius:3px
  }
  .xtul>li>div{flex:1;vertical-align: middle}
  .ve{width: 100%}
   .ve>div{
    display: none;
    width: 100%;
    height:100%;
  }
   .ve>div.blacx{display: block}

  .xq{
    padding: 20px 10px;
    width: 100%;
    font-size:16px;
    color: black;
    display: flex;
    justify-content: center;
  }
  .xq>li{
    padding: 5px 4px;
    text-align: left;
  }
  .xq>li div {
    min-height: 24px;
    line-height: 24px;
  }
  .xq>li>div:not(:nth-child(1)){
    font-size: 14px;
  }
</style>
